<template>
	<view class="paymentDetails WithdrawalDetails">
		<u-navbar title="提现详情" title-color="#333" back-icon-color="#333"></u-navbar>
		<!--下面的部分-->
		<view class="payment-explan">
			<view class="pay-amount">
				<text class="pay-doll">交易金额</text>
				<text class="pay-dell">{{payDetaList.ORMTB421CA02||''}}</text>
			</view>
			<view class="pay-line"></view>
			<view class="pay-list">
				<view>
					<view class="pay-list-li">
						<text class="pay-type">处理进度</text>
						<view class="pay-type-explan pay-type-jindu">
							<view class="pay-type-box">
								<view class="pay-type-one">1</view>
								<view class="pay-type-line"></view>
								<view class="pay-type-one">2</view>
								<view class="pay-type-line"></view>
								<view class="pay-type-one" v-if="TYPE=='审核中'" style="color: #999;border-color: #999;">3</view>
								<view class="pay-type-one" v-if="TYPE=='通过'" >3</view>
								<view class="pay-type-one" v-if="TYPE=='拒绝'" style="color: red;border-color: red;">3</view>
							</view>
							<view class="pay-type-box pay-type-title">
								<view class="pay-type-title-one pay-type-title-font">
									<view class="pay-type-title-font">发起提现申请</view>
									<view style="color: #666;">{{payDetaList.ORMTB421CA05||''}}</view>
								</view>
								<view class="pay-type-title-two">
									<view class="pay-type-title-font">平台审核中</view>
								</view>
								<view class="pay-type-title-three" v-if="TYPE=='审核中'">
									<view class="pay-type-title-font" style="color: #999;">审核结果</view>
								</view>
								<view class="pay-type-title-three" v-if="TYPE=='通过'">
									<view class="pay-type-title-font">审核成功</view>
									<view style="color: #666;">{{payDetaList.ORMTB421CA16||''}}</view>
								</view>
								<view class="pay-type-title-three" v-if="TYPE=='拒绝'">
									<view class="pay-type-title-font" style="color: rgba(255, 99, 99, 1);">审核拒绝</view>
									<view style="color: #666;">{{payDetaList.ORMTB421CA16||''}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="pay-list-li">
						<text class="pay-type">提现账号</text>
						<text class="pay-type-explan">{{payDetaList.ORMTB421CA11||''}}({{payDetaList.ORMTB421CA12text||''}})</text>
					</view>
					<view class="pay-list-li">
						<text class="pay-type">收款人</text>
						<text class="pay-type-explan">{{payDetaList.ORMTB421CA13||''}}</text>
					</view>
					<view class="pay-list-li" v-if="TYPE=='通过'||'拒绝'">
						<text class="pay-type">审核人</text>
						<text class="pay-type-explan">{{payDetaList.ORMTB421CA17||''}}</text>
					</view>
					<view class="pay-list-li" v-if="TYPE=='通过'||'拒绝'">
						<text class="pay-type">审核时间</text>
						<text class="pay-type-explan">{{payDetaList.ORMTB421CA16||''}}</text>
					</view>
					<view class="pay-list-li" v-if="TYPE=='通过'">
						<text class="pay-type">转账凭证</text>
						<image class="pay-list-li-image" :src="payDetaList.ORMTB421CA19||'../../static/images/noImage.png'"
						 mode="">
					</view>
					<view class="pay-list-li"v-if="TYPE=='通过'||'拒绝'">
						<text class="pay-type">审核备注</text>
						<text class="pay-type-explan">{{payDetaList.ORMTB421CA18||''}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payDetaList: [],
				ORMTB421ID: "",
				TYPE: ''
			}
		},
		onLoad(option) {
			this.TYPE = option.TYPE
			this.ORMTB421ID = option.ORMTB421ID
			// console.log(option)
		},
		onShow() {
			this.postData()
		},
		methods: {
			postData() {
				this.payDetaList = [];
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb421/selectById',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB421ID: this.ORMTB421ID,
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.payDetaList = res.data.data;
							this.payDetaList.ORMTB421CA12text =this.payDetaList.ORMTB421CA12.substring(this.payDetaList.ORMTB421CA12.length-4)
						} else {
							this.payDetaList = [];
							uni.showToast({
								title: res.data.message,
								duration: 5000,
								icon: 'none',
							});
						}
						uni.hideLoading();
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				});
			},
		}
	}
</script>

<style scoped>
	/*下面的部分*/

	.paymentDetails .payment-explan {
		width: 100%;
		/* margin-top: 176rpx; */

	}

	.WithdrawalDetails  .pay-amount {
		width: 100%;
		height: 115rpx;
		line-height: 118rpx;
		display: flex;
		justify-content: space-between;
		/* padding: 0 70rpx; */
		padding: 0 30rpx;
	}

	.paymentDetails .pay-doll {
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
	}

	.paymentDetails .pay-dell {
		font-size: 40rpx;
		color: rgba(255, 99, 99, 1);
	}

	.WithdrawalDetails .pay-line {
		height: 2rpx;
		width: 93%;
		background: rgba(234, 234, 234, 1);
		margin: 0 auto;
	}

	.paymentDetails .pay-list {
		min-height: 360rpx;
		width: 100%;
		height: auto;
		font-size: 26rpx;
	}

	.paymentDetails .pay-list-li {
		width: 100%;
		/* height: 30rpx; */
		display: flex;
		justify-content: space-between;
		padding: 15rpx 30rpx;
		/* padding: 30rpx 70rpx; */
	}

	.paymentDetails .pay-type {
		color: rgba(153, 153, 153, 1);
	}

	.paymentDetails .pay-type-explan {
		color: rgba(102, 102, 102, 1);
	}
	/*  */
	.pay-list-li-image {
		width: 200rpx;
		height: 200rpx;
	}
	.pay-type-jindu{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.pay-type-box{
		color:#0CAFFF ;
	}
	.pay-type-one{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 3rpx solid #0CAFFF;
		text-align: center;
		line-height: 50rpx;
	}
	.pay-type-line{
		width:5rpx;
		height: 45rpx;
		margin: 0 22.5rpx;
		text-align: center;
		background: #0CAFFF;
	}
	.pay-type-title{
		height: 240rpx;
	}
	.pay-type-title-font{
		font-size: 28rpx;
	}
	.pay-type-title-one{
		padding: 10.5rpx 0 10rpx 20rpx;
	}
	.pay-type-title-two{
		padding: 0rpx 0 28.5rpx 20rpx;
	}
	.pay-type-title-three{
		padding: 25rpx 0 5rpx 20rpx;
	}
</style>
